<template>
	<el-row shadow="hover" v-show="showSearch" class="ml10">
		<el-form :model="state.queryForm" ref="queryRef" :inline="true" @keyup.enter="getDataList">
			<el-form-item label="学校" prop="schoolId">
				<el-select v-model="state.queryForm.schoolId" placeholder="请选择学校" style="width: 100%" @change="(item: any) => getGradeList(item)">
					<el-option v-for="item in data.schoolList" :key="item.id" :label="item.schoolName" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="年级" prop="gradeId">
				<el-select v-model="state.queryForm.gradeId" placeholder="请选择年级" style="width: 100%" @change="(item: any) => getClassesList(item)">
					<el-option v-for="item in data.gradeList" :key="item.id" :label="item.gradeName" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="班级" prop="classesId">
				<el-select v-model="state.queryForm.classesId" placeholder="请选择班级" style="width: 100%">
					<el-option v-for="item in data.classesList" :key="item.id" :label="item.classesName" :value="item.id"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="日期" prop="date">
				<el-date-picker
					v-model="state.queryForm.date"
					type="daterange"
					format="YYYY-MM-DD"
					date-format="YYYY-MM-DD"
					start-placeholder="请选择开始时间"
					end-placeholder="请选择结束时间"
				/>
			</el-form-item>
			<el-form-item>
				<el-button icon="search" type="primary" @click="getDataList">
					{{ $t('common.queryBtn') }}
				</el-button>
				<el-button icon="Refresh" @click="resetQuery">{{ $t('common.resetBtn') }}</el-button>
			</el-form-item>
		</el-form>
	</el-row>
	<el-row>
		<div class="mb8" style="width: 100%">
			<right-toolbar
				v-model:showSearch="showSearch"
				class="ml10"
				@exportExcel="exportExcel"
				:export="'tb_student_combo_exprot'"
				style="float: right; margin-right: 20px"
				@queryTable="getDataList"
			></right-toolbar>
		</div>
	</el-row>
	<el-table
		:data="state.dataList"
		v-loading="state.loading"
		style="width: 100%"
		@selection-change="handleSelectionChange"
		border
		:cell-style="tableStyle.cellStyle"
		:header-cell-style="tableStyle.headerCellStyle"
	>
		<el-table-column type="selection" :selectable="handleSelectable" width="50" align="center" />
		<el-table-column type="index" label="#" width="80" />
		<el-table-column prop="schoolName" label="学校名称" show-overflow-tooltip></el-table-column>
		<el-table-column prop="gradeName" label="年级名称" show-overflow-tooltip></el-table-column>
		<el-table-column prop="classesName" label="班级名称" show-overflow-tooltip></el-table-column>
		<el-table-column prop="comboName" label="套餐名称" show-overflow-tooltip></el-table-column>
		<el-table-column prop="dateComboName" label="套餐子菜" show-overflow-tooltip></el-table-column>
		<el-table-column prop="date" label="时间" show-overflow-tooltip></el-table-column>
		<el-table-column prop="studentNames" label="学生姓名"></el-table-column>
		<el-table-column prop="count" label="数量" show-overflow-tooltip>
			<template #default="scope">
				<el-link
					v-if="scope.row.count"
					@click="toStudentBox(scope.row.schoolId, scope.row.gradeId, scope.row.classesId, scope.row.date, scope.row.comboId)"
					>{{ scope.row.count }}</el-link
				>
			</template>
		</el-table-column>
	</el-table>
	<pagination @size-change="sizeChangeHandle" @current-change="currentChangeHandle" v-bind="state.pagination" />
	<StudentStatices ref="studentStaticesRef" />
</template>
<script setup lang="ts">
import { BasicTableProps, useTable } from '/src/hooks/table';
import { classesDishStatices } from '/src/api/school/studentCombo';
import { useMessage, useMessageBox } from '/src/hooks/message';
import { listAll as listAllSchool } from '/src/api/school/school';
import { listAll as listAllGrade } from '/src/api/school/grade';
import { listAll as listAllClasses } from '/src/api/school/classes';
import { useI18n } from 'vue-i18n';
import dayjs from 'dayjs';

import StudentStatices from './studentStatices.vue';
// 引入组件
const { t } = useI18n();

// 定义变量内容
const roleDialogRef = ref();
const permessionRef = ref();
const excelUploadRef = ref();
const queryRef = ref();
const showSearch = ref(true);
// 多选rows
const selectObjs = ref([]) as any;
// 是否可以多选
const multiple = ref(true);

const pageDataInfo = (params: any) => {
	if (params.date) {
		params.startTime = dayjs(params.date[0]).format('YYYY-MM-DD');
		params.endTime = dayjs(params.date[1]).format('YYYY-MM-DD');
	}
	return classesDishStatices(params);
};
const studentStaticesRef = ref();
const toStudentBox = (schoolId: string, gradeId: string, classesId: string, date: string, comboId: string) => {
	studentStaticesRef.value.openDialog(schoolId, gradeId, classesId, date, comboId);
};

const state: BasicTableProps = reactive<BasicTableProps>({
	queryForm: {
		roleName: '',
	},
	pageList: pageDataInfo, // H
});

// 导出excel
const exportExcel = () => {
	if (state.queryForm.date) {
		state.queryForm.startTime = dayjs(state.queryForm.date[0]).format('YYYY-MM-DD');
		state.queryForm.endTime = dayjs(state.queryForm.date[1]).format('YYYY-MM-DD');
	}
	downBlobFile('/admin/studentCombo/classesDishStaticesExport', state.queryForm, '班级套餐子菜统计.xlsx');
};

const data = reactive({
	schoolList: [],
	gradeList: [],
	classesList: [],
});

onMounted(() => {
	getSchoolList();
});

//  table hook
const { getDataList, currentChangeHandle, sizeChangeHandle, downBlobFile, tableStyle } = useTable(state);

// 清空搜索条件
const resetQuery = () => {
	queryRef.value.resetFields();
	getDataList();
	getSchoolList();
};

const getSchoolList = async () => {
	data.gradeList = [];
	data.schoolList = [];
	data.classesList = [];
	const resp = await listAllSchool();
	data.schoolList = resp.data;
};

const getGradeList = async (schoolId: string) => {
	data.gradeList = [];
	data.classesList = [];
	const resp = await listAllGrade({ schoolId });
	data.gradeList = resp.data;
};

const getClassesList = async (gradeId: string) => {
	data.classesList = [];
	const resp = await listAllClasses({ gradeId });
	data.classesList = resp.data;
};

// 是否可以多选
const handleSelectable = (row: any) => {
	return row.roleId !== '1';
};

// 多选事件
const handleSelectionChange = (objs: { roleId: string }[]) => {
	selectObjs.value = objs.map(({ roleId }) => roleId);
	multiple.value = !objs.length;
};
</script>
<style scoped lang="scss"></style>
